<script setup>
import { ref } from 'vue'
const toCenter = (index) => {
    switch (index) {
        case 1:
            class1.value = {
                'sort2':true,
                'big':true
            }
            class2.value = {
                'sort3':true,
                'big':false
            }
            class3.value = {
                'sort1':true,
                'big':false
            }
            title.value = '你点了1'
            subtitle.value = '文字内容1 文字内容1'
            break;
        case 2:
            class1.value = {
                'sort1':true,
                'big':false
            }
            class2.value = {
                'sort2':true,
                'big':true
            }
            class3.value = {
                'sort3':true,
                'big':false
            }
            title.value = '你点了2'
            subtitle.value = '文字内容2 文字内容2'
            break;
        case 3:
            class1.value = {
                'sort3':true,
                'big':false
            }
            class2.value = {
                'sort1':true,
                'big':false
            }
            class3.value = {
                'sort2':true,
                'big':true
            }
            title.value = '你点了3'
            subtitle.value = '文字内容3 文字内容3'
            break;
        default:
            break;
    }
}
const class1 = ref({
    'sort1':true,
    'big':false
})
const class2 = ref({
    'sort2':true,
    'big':true
})
const class3 = ref({
    'sort3':true,
    'big':false
})

const title = ref('立即成为SVIP')
const subtitle = ref('特权升级 尊享服务')

</script>

<template>
<div class="pay-page">
    <div class="container">
        <div class="pay-title">
            <h1 class="title">{{title}}</h1>
            <h2 class="sub-title">{{subtitle}}</h2>
        </div>
        <div class="pay-panel-scroll">
            <div class="pay-panel" :class="class1" @click="toCenter(1)">1</div>
            <div class="pay-panel" :class="class2" @click="toCenter(2)">2</div>
            <div class="pay-panel" :class="class3" @click="toCenter(3)">3</div>
        </div>
    </div>
</div>
</template>

<style scoped>
.pay-page {
    height: 356px;
    background: #128bed url(https://qcc-static.qichacha.com/qcc/pc-web/prod-4.4.61/pay_top_bg-d8785acf.png) no-repeat top;
    background-size: cover;
    padding-top: 35px;
}
.container {
    margin-left: calc(50vw - 625px);
   
}
.container .pay-title .title {
    font-size: 44px;
    font-family: "Microsoft YaHei", Arial;
    color: #fff;
    text-align: center;
}
.container .pay-title .sub-title{
    font-size: 26px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #fff;
    margin-top: 20px;
    text-align: center;
}
.pay-panel-scroll {
    width: 1220px;
    background: royalblue;
    position: relative;
}

.pay-panel-scroll .pay-panel {
    width: 320px;
    height: 340px;
    border-radius: 10px;
    border: 2px solid transparent;
    background-color:rgba(50, 50, 50, 0.25);
    position: absolute;
    transition: all 0.4s;
}

.sort1 {
    left: 0;
    top: 100px;
    z-index: 2;
}

.sort2 {
    left: 340px;
    top: 35px;
    z-index: 3;
}

.sort3 {
    left: 900px;
    top: 100px;
    z-index: 1;
}

.pay-panel-scroll .big {
    width: 540px;
    height: 520px;
}
</style>
